<template>
    <view class="loginBox">
        <view class="userLoginFrom">
            <input 
                class="username"
                v-model="username"
                placeholder="请输入用户名"
            />
            <input 
                class="password"
                type="password"
                v-model="password"
                placeholder="请输入密码"
            />
            <button class="loginBtn" @click="userLogin">登录</button>
            <view class="registerTip">没有账号？点击<text class="registerText" @click="toRegister">注册</text></view>
        </view>
    </view>
</template>

<script setup>
    import { ref } from 'vue'
    import { login } from '../../api/api'

    let username = ref('')
    let password = ref('')

    function userLogin() {
        login({
            username: username.value,
            password: password.value
        }).then(res => {
            uni.setStorageSync('loginUserName', res.data.username)
            uni.setStorageSync('isLogin', 'true')
            uni.switchTab({
                url: '/pages/index/index'
            })
        }).catch(err => {
            const { code, message } = err.data
            uni.showToast({
                title: message,
                icon: 'none'
            })
            console.log(code, message)
        })
    }

    function toRegister() {
        uni.navigateTo({
            url: '/pages/register/register'
        })
    }

</script>

<style lang="scss" scoped>
page, html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.loginBox {
    background: #f3f8ff;
    background-image: url(../../static/bug.svg);
    background-repeat: no-repeat;
    background-position: 50% 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    .userLoginFrom {
        width: 80%;
        max-width: 480rpx;
        transform: translateY(-30%);
    }

    .username,
    .password {
        width: 100%;
        height: 88rpx;
        margin-bottom: 40rpx;
        padding: 0 32rpx;
        box-sizing: border-box;
        border: 1rpx solid #b3d4fc;
        border-radius: 12rpx;
        font-size: 30rpx;
        background: #ffffff;
        transition: border-color .2s;
    }
    .username:focus,
    .password:focus {
        border-color: #4096ff;
    }

    .loginBtn {
        width: 100%;
        height: 88rpx;
        line-height: 88rpx;
        background: #7bb8ff;
        color: #fff;
        border-radius: 12rpx;
        font-size: 32rpx;
        border: none;
        transition: background .2s;
    }
    .loginBtn:active {
        background: #4096ff;
    }

    .registerTip {
        margin-top: 32rpx;
        text-align: center;
        font-size: 28rpx;
        color: #666;
    }
    .registerText {
        color: #4096ff;
    }
}
</style>